<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>App更新历史</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="__LAYUIADMIN__/res/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__LAYUIADMIN__/res/adminui/dist/css/admin.css" media="all">
    <style>
        .admin-container {
            padding: 20px;
        }

        .layui-tab-content {
            padding: 20px 0;
        }

        .layui-form-item {
            margin-bottom: 25px;
        }

        .layui-upload-img {
            width: 100px;
            height: 100px;
            margin: 10px;
        }

        .layui-upload-list img {
            max-width: 300px;
            max-height: 200px;
        }

        .update-history-item {
            margin-bottom: 20px;
            padding: 15px;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
            position: relative;
        }

        .update-history-item .remove-update {
            position: absolute;
            right: 10px;
            top: 10px;
        }

        .preview-item {
            display: inline-block;
            position: relative;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .preview-item img {
            width: 200px;
            height: 125px;
            object-fit: cover;
            border-radius: 5px;
        }

        .preview-item .remove-preview {
            position: absolute;
            right: 5px;
            top: 5px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
        }

        .app-info-container {
            border: 1px solid hsl(0, 0%, 90%);
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">App更新历史</div>
                    <div class="layui-card-body">
                        <div class="layui-btn-group" style="margin-bottom: 10px;">
                            <button type="button" class="layui-btn layui-btn-normal  layui-btn-sm " id="add-history-btn">
                                <i class="layui-icon">&#xe654;</i> 添加更新记录
                            </button>
                        </div>
                        <div id="update-history-table" lay-filter="update-history-table"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 工具栏模板 -->
    <script type="text/html" id="historyToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</button>
            <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</button>
        </div>
    </script>

    <!-- 添加/编辑表单模板 -->
    <script type="text/html" id="history-form-tpl">
        <form class="layui-form" id="history-form" lay-filter="history-form" style="padding: 20px 30px 0 0;">
            <input type="hidden" name="id" value="{{ d.id || '' }}">
            <div class="layui-form-item">
                <label class="layui-form-label">版本号</label>
                <div class="layui-input-block">
                    <input type="text" name="version" value="{{ d.version || '' }}" required lay-verify="required" placeholder="请输入版本号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">发布日期</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="date-input" value="{{ d.date || '' }}" required lay-verify="required" placeholder="请选择日期" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">更新内容</label>
                <div class="layui-input-block">
                    <textarea name="content" placeholder="请输入更新内容" class="layui-textarea" rows="6">{{ d.content || '' }}</textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="history-form-submit">确认提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </script>

    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var table = layui.table;
            var upload = layui.upload;
            var laytpl = layui.laytpl;
            $ = layui.$;

            // 加载数据
            function loadData() {
                table.render({
                    elem: '#update-history-table',
                    url: '/admin/app/upgradeLog', 
                    method: 'get',
                    parseData: function (res) {
                        return {
                            "code": 200,
                            "msg": res.message,
                            "count": res.data.total,
                            "data": res.data.data
                        };
                    },
                    cols: [[
                        { field: 'id', title: 'ID', width: 80, sort: true },
                        { field: 'version', title: '版本号', width: 100 },
                        { field: 'date', title: '发布日期', width: 120 },
                        { field: 'content', title: '更新内容', width: 200 },
                        { title: '操作', width: 150, toolbar: '#historyToolbar'}
                    ]],
                    page: true, // 开启分页
                    limit: 10,
                    limits: [10, 20, 50],
                    request: {
                        pageName: 'page', // 页码的参数名称
                        limitName: 'limit' // 每页数据量的参数名
                    },
                    response: {
                        statusName: 'code', // 规定数据状态的字段名称
                        statusCode: 200, // 规定成功的状态码
                        msgName: 'msg', // 规定状态信息的字段名称
                        countName: 'count', // 规定数据总数的字段名称
                        dataName: 'data' // 规定数据列表的字段名称
                    }
                });
            }

            // 初始加载数据
            loadData();

            // 监听工具条事件
            table.on('tool(update-history-table)', function (obj) {
                var data = obj.data;
                var event = obj.event;

                if (event === 'edit') {
                    // 编辑
                    openHistoryForm('编辑更新记录', data);
                } else if (event === 'del') {
                    // 删除
                    layer.confirm('确定删除此更新记录？', function (index) {
                        $.ajax({
                            url: '/admin/app/upgradeLogDel',
                            type: 'POST',
                            data: { id: data.id },
                            success: function (res) {
                                if (res.code === 200) {
                                    layer.msg('删除成功');
                                    table.reload('update-history-table');
                                } else {
                                    layer.msg(res.msg || '删除失败');
                                }
                            },
                            error: function () {
                                layer.msg('网络错误，请稍后重试');
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // 打开表单
            function openHistoryForm(title, data) {
                data = data || {};

                laytpl(document.getElementById('history-form-tpl').innerHTML)
                    .render(data, function (html) {
                        layer.open({
                            type: 1,
                            title: title,
                            area: ['600px', '440px'],
                            content: html,
                            success: function (layero, index) {
                                form.render(null, 'history-form');

                                // 初始化日期选择器
                                laydate.render({
                                    elem: '#date-input',
                                    trigger: 'click'
                                });

                                // 监听表单提交
                                form.on('submit(history-form-submit)', function (data) {
                                    var field = data.field;
                                    var url = field.id ? '/admin/app/upgradeLogEdit' : '/admin/app/upgradeLogAdd';

                                    $.ajax({
                                        url: url,
                                        type: 'POST',
                                        data: field,
                                        success: function (res) {
                                            if (res.code === 200) {
                                                layer.msg(field.id ? '更新成功' : '添加成功');
                                                layer.close(index);
                                                table.reload('update-history-table');
                                            } else {
                                                layer.msg(res.msg || (field.id ? '更新失败' : '添加失败'));
                                            }
                                        },
                                        error: function () {
                                            layer.msg('网络错误，请稍后重试');
                                        }
                                    });

                                    return false;
                                });
                            }
                        });
                    });
            }

            // 添加按钮点击事件
            $('#add-history-btn').on('click', function () {
                openHistoryForm('添加更新记录');
            });
        });
    </script>
    <!-- Cloudflare Pages Analytics -->
    <script defer src='https://static.cloudflareinsights.com/beacon.min.js'
        data-cf-beacon='{"token": "43b4b1a48ab04f89a979a2c4f6be6118"}'></script><!-- Cloudflare Pages Analytics -->
</body>

</html>